<template>
	<div class="my">

		<div class="top" @click="toPersonnalData()">
			<div class="left">
				<img src="../assets/login.jpg" alt="">
			</div>
			<div class="right">
				<h3 class="tel">18146068305</h3>
				<p class="grade">一年级</p>
			</div>
			<div class="topIcon">
				<x-icon type="ios-arrow-right" size="30"></x-icon>
			</div>

		</div>
		<grid class='grid'>
			<grid-item :label="val.label" v-for="(val,i) in gridList" :key='i' @click.native='toPersonnalData(i)'>
				<img slot="icon" :src="val.url">
			</grid-item>
		</grid>
		<ul class="content">
			<li v-for="(val,index) in list" @click="toMyList()">
				<img src="../assets/home/home.png" alt="">{{val}}
			</li>

		</ul>


		<navBottom class="nav"></navBottom>
	</div>
</template>
<script>
	import {
		Grid,
		GridItem
	} from 'vux'
	import NavBottom from '@/components/navBottom'
	export default {
		components: {
			NavBottom,
			Grid,
			GridItem
		},
		data() {
			return {
				gridList: [{
						label: '我的孩子',
						url: require('../assets/home/good.png')
					},
					{
						label: '我的老师',
						url: require('../assets/home/good.png')
					},
					{
						label: '亲属管理',
						url: require('../assets/home/good.png')
					},
				],
				list: ['我的小孩', '我的老师', '亲属管理', '我的课程'],

			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			toPersonnalData(i) {
				if (i == 2) {
					this.$router.push('/myList');
					return;
				}
				this.$router.push('/personalData')
			},
			toMyList() {
				this.$router.push('/myList')
			}
		},


	}
</script>

<style lang="less" scoped="scoped">
	.my {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.top {
			position: relative;
			color: #FFF;
			padding: 10px 15px;
			height: 100px;
			background: #56CCF2;
			/* fallback for old browsers */
			background: -webkit-linear-gradient(to bottom, #2F80ED, #56CCF2);
			/* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to bottom, #2F80ED, #56CCF2);
			/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

			.topIcon {
				position: absolute;
				right: 10px;
				top: 50%;
				fill: #FFF;
				transform: translateY(-50%);
			}

			.left {
				margin-top: 15px;
				width: 20%;
				float: left;

				img {
					width: 70px;
					height: 70px;
					border-radius: 50%;
					display: inline-block;
				}
			}

			.right {
				margin-top: 15px;
				width: 80%;
				float: left;

				.tel {
					padding: 10px 10px 0px 10px;
				}

				.grade {
					padding: 0 10px;
				}

			}
		}

		.grid {
			background: #FFF;

		}

		.content {
			width: 100%;
			height: 100%;
			margin-top: 10px;
			list-style: none;
			font-size: 14px;

			li {
				padding: 10px 15px;
				height: 15px;
				background: #FFF;
				margin-bottom: 1px;
				line-height: 15px;

				img {
					width: 16px;
					height: 16px;
					vertical-align: bottom;
					padding-right: 10px;
				}
			}
		}
	}
</style>
